<div class="pageHeader" >
    <div class="detailMain">   
          <!-- 表单包围范围问题，表单提交最终包含范围-->
          <!--多个衔接符 点击出现-->
        <div class="oldMmultiContent" style="display: none;">
            <div class="row MmultiContent" style="margin-top: 10px;margin-bottom: 10px;">
                <div class="col-lg-2 startStr">
                    <select id="inputState"  class="form-control types" title="请选择订单类型" name="types">
                        <option value=""  selected  style="display:none">请选择运算符</option>    
                        <option value="0" > > </optinon>
                        <option value="1" > = </optinon>
                        <option value="2" > < </optinon>
                        <option value="3" > >= </optinon>
                        <option value="4" > <= </optinon>
                    </select>
                </div>
                <div class="col-lg-2 input-group startStr">
                        <span class="muiltiKey"> 值 :</span><input type="text" name="value"  class="form-control valueAdd valueStr" placeholder="请输入value">
                </div>
                <div class="col-lg-2  delStr">
                        <button type="button" class="btn btn-danger " onclick="delMltiItem(event)"><i class="fa fa-window-minimize " style="pointer-events: none;"></i></button>
                </div> 
            </div>
        </div>
    <form  id="multiForm"  method="post" >
        <div class="multiMain" style="display:none;">
            <div class="row " >
                <div class="col-lg-2 input-group">
                    <span class="muiltiKey"> 关键字 :</span><input type="text" name="key"  class="form-control" placeholder="请输入关键字">
                </div>
            </div>
            <div class="row oldMmulti" style="margin-top: 10px;margin-bottom: 10px;">
                <div class="col-lg-2">
                    <select id="inputState"  class="form-control show-tick" title="请选择订单类型" name="type">
                        <option value=""  selected  style="display:none">请选择运算符</option>    
                        <option value="0" > > </optinon>
                        <option value="1" > = </optinon>
                        <option value="2" > < </optinon>
                        <option value="3" > >= </optinon>
                        <option value="4" > <= </optinon>
                    </select>
                </div>
                <div class="col-lg-2 input-group">
                    <span class="muiltiKey"> 值 :</span><input type="text" name="value"  class="form-control valueStr" placeholder="请输入value">
                </div>
                <div class="col-lg-2 delStr">
                        <button type="button" class="btn btn-danger " onclick="delMltiItem(event)"><i class="fa fa-window-minimize " style="pointer-events: none;"></i></button>
                </div> 
            </div>
        </div>
    </form>
    </div>
    <div class = "MiltiEnd " style="display:none; margin-top: 10px;margin-bottom: 10px;">
         <div class="col-lg-2 endStr">
            <!-- <select id="inputState"  class="form-control selectpicker show-tick" title="请选择订单类型" name="type"> -->
            <select id="inputState"  class="form-control show-tick link" title="与或" name="link">
                <option value="" selected>请选择连接符 </optinon>
                <option value="or" selected> or </optinon>
                <option value="and" > and </optinon>
            </select>
        </div>
        <div class="col-lg-2  endStr">
                    <button type="button" class="btn btn-danger " onclick="delMltiItem(event)"><i class="fa fa-window-minimize " style="pointer-events: none;"></i></button>
        </div> 
    </div>
    <div class = "endDel" style="display:none;">
           <div class="col-lg-2  endStr">
                       <button type="button" class="btn btn-danger " onclick="delMltiItem(event)"><i class="fa fa-window-minimize " style="pointer-events: none;"></i></button>
           </div> 
       </div>
</div>

<div class="pageContent">
        <div id="toolbar" class="btn-group mr1" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-success" onclick="addMuiltStr()"><i class="glyphicon glyphicon-plus"></i></button>
                <button type="button" class="btn btn-success" onclick="searchMlti()"><i class="fa fa-search"></i></button>
        </div>
    <!-- <div id="jsGrid"></div> -->
    <table id="MltiForm" class="col-xs-8 col-md-6 grid"></table>
</div>

<script>
    
$(function() {
      //1.初始化Table
     var oTable = new TableInit();
     oTable.Init();
// debugger
      console.log("{{orderId}}")
});

function addMuiltStr(){

    if($('.multiMain').css("display")==="none"){ //第一次点击隐藏变展示
         $('.multiMain').css("display","block");
    }else{
        var  oldMmulti =  $(".oldMmultiContent").html();  //取出第二行数据
        $(".multiMain").find(".delStr").css("display","none");
        $(".multiMain").append(oldMmulti)              ;  //插入第二行数据
        // console.log($(".multiMain").find("div :last").parent().parent().prev()[0]) //定位前一个div后面追加个div与或！！！
        $(".multiMain").find("div :last").parent().parent().parent().prev().append($(".MiltiEnd").html())  //将与或条件和删除添加到后面
    }
}

function delMltiItem(event){ //最后一条删除不删除当前行数据 当删除最后一行之前有数据
        // debugger
        if($('.multiMain').find(".endStr").length ===0){   //最后一次的删除还要把key删除  判断endStr需要在删除前操作
                console.log($('.multiMain').find(".endStr")[0]);
                $('.multiMain').css("display","none")
        }else{
                console.log($(event.target).parent().parent().find('.endStr')[0]); //当前行没有与或条件删除上一条数据的与或
                if($(event.target).parent().parent().find('.endStr').length===0){   //删除最后一条
                    console.log($(event.target).parent().parent().prev()[0]); 
                    $(event.target).parent().parent().prev().find('.endStr').remove(); //清空当前行和上一行与或删除条件
                    $(event.target).parent().parent().prev().find('.delStr').css("display","block");
                }   
                $(event.target).parent().parent().remove();

        }
}
// var valueTag = true;
function searchMlti(){   //搜索条件自定义
    // debugger
   var valueStr = $(".multiMain").find("input[name='value']").val();
   var keyStr = $(".multiMain").find("input[name='key']").val();
   
   // var valueStr = $().val();
    if (valueStr === "" || valueStr.value === null ) {
        // valueTag=false;
        toastr.warning('请填写value值!');
        return ;
    }else if(keyStr===""||keyStr===null){
        toastr.warning('请填写key值!');
        return ;  
    }else{
        // if(valueTag === true){
         
    // console.log($("#multiForm").serialize()); //动态添加的表单html内容这种方式提交
    // console.log($("#multiForm").getFormData()); //动态添加的表单html内容这种方式提交
    var values =[];
    var multiFormData = $("#multiForm").getFormData()
    var aDiv = document.getElementsByClassName('MmultiContent'); //取出重复部分的数组
      
    for(var i=0;i<aDiv.length;i++){
        if($(aDiv[i]).find(".link").val()===undefined){ //最后一条数据    
            // console.log("最后一条");
            var valueFirst ={};
            // console.log($(aDiv[i]).find(".types").val());
            // console.log($(aDiv[i]).find(".valueAdd").val());
            // console.log($(aDiv[i]).find(".link").val());
            valueFirst.type=$(aDiv[i]).find(".types").val();        
            valueFirst.value=$(aDiv[i]).find(".valueAdd").val();   
            values.push(valueFirst); 
    
        }else{ //中间的数据
            // console.log("第一条");
            var valueend ={};
            // console.log($(aDiv[i]).find(".types").val());
            // console.log($(aDiv[i]).find(".valueAdd").val());
            // console.log($(aDiv[i]).find(".link").val());
            valueend.type=$(aDiv[i]).find(".types").val();        
            valueend.value=$(aDiv[i]).find(".valueAdd").val();        
            valueend.link=$(aDiv[i]).find(".link").val();    
            values.push(valueend); 
        }
    }
    // console.log("输出新数组");
    // console.log(values);
    for(var i =0;i<values.length;i++){
        // debugger     
        if(values[i].link!=undefined){
                if(i+1>=values.length){
                    break ;
                }
                values[i+1].newlink = values[i].link ; //前一个等于后一个   
                delete values[i].link ;  //将当前值link覆盖下一个值，避免下一个link值被覆盖，源数据改名字，删掉原有link值，新数据为更名后
        }
    }
    // console.log("调整好顺序之后的数组") 
    // console.log(values); 
    values.splice(0,1);
    // console.log(values); 
    for(var i =0; i<values.length;i++){
    //   debugger
        if(values[i].newlink){
            values[i].link = values[i].newlink;
            delete values[i].newlink
        }
        // console.log(multiFormData.link);
        // console.log(values[i].link ===undefined);
        if(values[i].link ===undefined){
            values[i].link = multiFormData.link;
        }
    }
   
    var valueHead = {} ; 
    valueHead.type =multiFormData.type; 
    valueHead.value =multiFormData.value; 
    values.splice(0, 0, valueHead); // valueHead ;  
    console.log(values);
        $('#MltiForm').bootstrapTable('refresh',{query:{"key":multiFormData.key,"values":JSON.stringify(values)}});
    //  }
    }  
}

var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#MltiForm').bootstrapTable({
            url: '/order/getMlti',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar',                //工具增删改按钮用哪个容器
            toolbarAlign:'left',
            // searchAlign:'left',
            buttonsAlign:'left',
            striped: false,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 20,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            // search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，没意义
            contentType: "application/x-www-form-urlencoded",
            // strictSearch: true,					//启用严格搜索
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "no",                     //每一行的唯一标识，一般为主键列
            //showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            //showHeader:true,
            //showPaginationSwitch:true,
            buttonsToolba:'#buttons-toolbar', 
            columns: [
            {
                field: 'id',
                title: 'id',
                sortable:true
            },{
                field: 'boardSn',
                title: '板级SN'
                // sortable:true
            },{
                field: 'paraKey',
                title: '参数键'
            },
            {
                field: 'paraValue',
                title: '参数值'
            },
            {
                field: 'paraResult',
                title: '参数结果'
            },
            {
                field: 'paraAction',
                title: '参数行为'
            },
            {
                field: 'finishTime',
                title: '时间'
            },
            ],
            sortName:'id',
         
            onReorderRowsDrag: function (table, row) {
            return false;
            },
            onReorderRowsDrop: function (table, row) {
                return false;
            },
             onReorderRow: function (newData) {
                 return false;
            }
        });
    };
    // oTableInit.queryParams = function (params) {
    //         var order = {};
    //         order.orderId = '{{orderId}}';
    //         var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
    //             pageSize: params.limit,   //页面大小
    //             pageCurrent: params.offset //页码
    //         };
    //         return $.extend({}, temp, order);
    //     };
    //得到查询的参数
    oTableInit.queryParams = function (params) {
         var mltiObject = {};
         mltiObject.processId ="{{orderId}}"
        // var offset  = params.offset/params.limit+1;
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize: params.limit,   //页面大小
            pageCurrent:params.offset  //页码
        };
        return $.extend({}, temp, mltiObject);
    };
    return oTableInit;
};

</script>

